<template>
  <div>
    <div class="bread-box but20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="goBack">异常管理详情</el-breadcrumb-item>
        <el-breadcrumb-item> 详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div>
      <div class="mt20" style="padding-bottom: 100px;">
        <el-form :model="formData" size="mini" label-width="120px">
          <el-row class="form_item_height">
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="门店建设项目号:" prop="constCode">{{ formData.constCode }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属门店:" prop="shopName">{{ formData.shopName }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属客户:" prop="clientName">{{ formData.clientName }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属办事处:" prop="officeName">{{ formData.officeName }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属办事处性质:" prop="officeNatural">{{ formData.officeNatural }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="经销商姓名:" prop="customerName">{{ formData.customerName }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="经销商电话:" prop="customerPhone">{{ formData.customerPhone }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="门店设计申请人:" prop="applicantName">{{ formData.applicantName }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常类型:" prop="exceptionType">{{ formData.exceptionType }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常状态:" prop="state">{{ formaterData(exceptionStateList, formData.state) }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属模块:" prop="belongModel">{{ formaterData(belongModelList, formData.belongModel) }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务编码:" prop="bizCode">{{ formData.bizCode }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务名称:" prop="bizName">{{ formData.bizName }}</el-form-item>
            </el-col>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属阶段:" prop="belongModel">{{ formData.belongModel }}</el-form-item>
            </el-col> -->
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="是否BPM审批:" prop="isBpmReview">{{ formaterData(booleansDictList, formData.isBpmReview) }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="BPM申请单号:" prop="bpmInstanceNo">{{ formData.bpmInstanceNo }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常提报人:" prop="createBy">{{ formData.createBy }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常提报时间:" prop="createTime">{{ formData.createTime }}</el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常处理人:" prop="handler">{{ formData.handler }}</el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <el-form-item label="异常说明:" prop="exceptionDesc">{{ formData.exceptionDesc }}</el-form-item>
            </el-col>
            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="门店建设类型:" prop="modifName">{{ formData.xxx }}</el-form-item>
            </el-col> -->

          </el-row>
        </el-form>
        <div class="qup-title-box">
          <span class="border" /><span>问题明细</span>
        </div>
        <!-- 分页列表 -->
        <el-table
          ref="multipleTable"
          :data="formData.shopExceptionDetailDtos"
          style="width: 100%;margin-bottom: 20px;"
          header-row-class-name="table-list-header"
          highlight-current-row
          border
        >
          <el-table-column fixed="left" label="序号" type="index" />
          <el-table-column label="问题分类" prop="problemCategory" min-width="100">
            <template slot-scope="scope">
              <span>{{ formaterData(problemList, scope.row.problemCategory) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="缺货类别" prop="stockoutType" show-overflow-tooltip min-width="100">
            <template slot-scope="scope">
              <span>{{ formaterData(stockoutTypeList, scope.row.stockoutType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="异常描述" prop="exceptionDesc" min-width="100" show-overflow-tooltip />
          <el-table-column label="装修范围" prop="decorationRange" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ formaterArr(decorationRangeList, scope.row.decorationRange) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="责任归属" prop="belongDuty" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ formaterData(belongDutyList, scope.row.belongDuty) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否涉及扣款" prop="isRelateDeduction" min-width="100">
            <template slot-scope="scope">
              <span>{{ booleansFormatter(scope.row.isRelateDeduction) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="扣款说明" prop="deductionDesc" min-width="100" show-overflow-tooltip />
          <el-table-column label="异常解决方案" prop="solution" min-width="100" show-overflow-tooltip />
          <el-table-column label="是否涉及定制样品调整" prop="isSampleChange" min-width="200" :formatter="booleansFormatter">
            <template slot-scope="scope">
              <span>{{ booleansFormatter(scope.row.isSampleChange) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="关联图纸" prop="picTaskCode" min-width="100" show-overflow-tooltip />
          <el-table-column label="减少装修区域面积" prop="cutRegionArea" min-width="120" show-overflow-tooltip />
          <el-table-column label="暂停时间" prop="stopTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="预计恢复时间" prop="expectRestoreTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="暂停原因类型" prop="stopReasonType" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ formaterData(stopReasonTypeList, scope.row.stopReasonType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="调整前时间" prop="beforeAdjustTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="申请延期时间" prop="afterAdjustTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="延期天数" prop="delayDay" min-width="100" show-overflow-tooltip />
          <el-table-column label="审批后调整时间" prop="afterReviewTime" min-width="120" show-overflow-tooltip />
          <el-table-column label="预计完工时间" prop="expectEndTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="调整前门店编码" prop="beforeShopCode" min-width="120" show-overflow-tooltip />
          <el-table-column label="调整后门店编码" prop="afterShopCode" min-width="120" show-overflow-tooltip />
          <!-- <el-table-column label="备注" prop="remark" min-width="120" show-overflow-tooltip /> -->

          <el-table-column label="减免类型" prop="deductionType" min-width="120" show-overflow-tooltip />
          <el-table-column label="申请原因/备注" prop="remark" min-width="120" show-overflow-tooltip />
          <el-table-column label="物料类别" prop="materialCategory" min-width="120" show-overflow-tooltip />
          <el-table-column label="物料类型" prop="materialType" min-width="120" show-overflow-tooltip />
          <el-table-column label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip />
          <el-table-column label="物料名称" prop="materialName" min-width="120" show-overflow-tooltip />
          <el-table-column label="需求数量" prop="demandNum" min-width="120" show-overflow-tooltip />
          <el-table-column label="单位" prop="unit" min-width="120" show-overflow-tooltip />
          <el-table-column label="规格" prop="specifications" min-width="120" show-overflow-tooltip />
          <el-table-column label="下单意见" prop="orderOpinion" min-width="120" show-overflow-tooltip />
          <el-table-column label="下单数量" prop="orderNum" min-width="120" show-overflow-tooltip />

          <!-- 物料类别、物料类型、物料编码、物料名称、需求数量、单位、规格、备注、下单意见、下单数量字段
               减免类型、申请原因字段 -->
        </el-table>
        <div class="qup-title-box">
          <span class="border" /><span>附件信息</span>
        </div>
        <div>
          <c-table-box :data="tableData" hide-func :table-config="tableConfig" v-bind="$attrs" />
          <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="urlList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getExceptionDeatil } from '@/api/storeConstruction'
import { getDictByPatchType } from '@/api/dataDict'
import { getShopAttachment } from '@/api/decorate'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'Details',
  components: { ElImageViewer },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      formData: {},
      belongModelList: [],
      exceptionStateList: [],
      stockoutTypeList: [],
      stopReasonTypeList: [],
      booleansDictList: [],
      belongDutyList: [],
      problemList: [],
      decorationRangeList: [],
      booleansList: [
        { dictName: '是', dictCode: 1 },
        { dictName: '否', dictCode: 0 }
      ],
      showViewer: false,
      urlList: [],
      fileTypeList: [],
      tableData: [],
      tableConfig: {
        setting: [
          {
            prop: 'attachmentName',
            label: '附件名称'
          },
          {
            prop: 'attachmentType',
            label: '附件类型'
          },
          {
            prop: 'createBy',
            label: '上传人'
          },
          {
            prop: 'createTime',
            label: '上传时间'
          },
          {
            label: '操作',
            type: 'hidden',
            button: [
              {
                name: '查看预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '附件下载',
                clickFun: this.downLoadFile,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }
        ]
      }
    }
  },
  computed: {
    nowvisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },

  created() {
    // this.formData.id = this.de
    getExceptionDeatil(this.detailData.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
      }
    })
    this.getDictByPatchTypeAll(['BELONG_MODEL', 'SHOP_EXCEPTION_STATE', 'STOCKOUT_TYPE',
      'STOP_REASON_TYPE', 'BOOLEANS', 'PROBLEM_CATEGORY', 'BELONG_DUTY', 'DECORATION_RANGE'])
      .then(res => {
        this.belongModelList = res.BELONG_MODEL
        this.exceptionStateList = res.SHOP_EXCEPTION_STATE
        this.stockoutTypeList = res.STOCKOUT_TYPE
        this.stopReasonTypeList = res.STOP_REASON_TYPE
        this.booleansDictList = res.BOOLEANS
        this.problemList = res.PROBLEM_CATEGORY
        this.belongDutyList = res.BELONG_DUTY
        this.decorationRangeList = res.DECORATION_RANGE
      })
    this.getFiles(this.detailData.id)
  },
  methods: {
    // 获取附件
    getFiles(id) {
      getShopAttachment(id).then(res => {
        this.tableData = res.data
      })
    },
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    formaterArr(data, str) {
      if (!data || !data.length || !str || !str.length) return
      let list = []
      if (typeof (str) === 'string') {
        list = str.split(',')
      } else {
        list = str
      }
      const arr = []
      data.forEach((item) => {
        const flag = list.some(v => v === item.dictCode)
        if (flag) {
          arr.push(item.dictName)
        }
      })
      return arr.toString()
    },
    booleansFormatter(data) {
      if (data === 1) {
        return '是'
      } else if (data === 0) {
        return '否'
      }
    },
    goBack() {
      this.$emit('goBack')
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
      this.urlList = []
    },
    handlePreview(file) {
      this.urlList = []
      const typeName = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.showViewer = true
        const picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        this.urlList.push(picUrl)
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        // word,excel预览
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    getFileData(file) {
      const t = {
        ...file,
        attachmentName: file.attachmentName || '',
        attachmentUrl: file.attachmentUrl || '',
        createBy: file.createBy || '',
        createTime: file.createTime || '',
        id: file.id || file.uid,
        typeName: file.typeName || (file.attachmentUrl || '').split('.').pop(),
        belongModel: file.belongModel || '',
        attachmentType: file.attachmentType || '',
        configAttachmentId: file.configAttachmentId || ''
      }
      delete t.raw
      return t
    },
    downLoadFile(row) {
      const v = this.getFileData(row)
      this.$downFile(v)
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/.el-icon-circle-close:before{
  color: white
}
  /deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
.subdaoch{margin: 10px 0;}
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner,.btn-green{
    color: #3DC094;
}
.qup-title-box{background: #f2f2f2; line-height: 30px;}
.spancla{
  color: #3DC094;
    font-weight: 400;
    float: right;
    margin-right: 10px;
}
</style>

